irongit
Sign inRegister
huncholanehuncholane/dotbarPublic

Waybar configuration

dotbar/style/[Extra] Prismatic Glow.css
284 lines5.4 KBCSS
RawDownloadHistory
1/* ----------- 💫 https://github.com/JaKooLit 💫 -------- */
2/* .............Prismatic Glow............ */
3
4* {
5 font-family: "JetBrainsMono Nerd Font";
6 font-weight: bold;
7 min-height: 0;
8 /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
9 font-size: 97%;
10 font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
11
12 border: none;
13 border-radius: 10px;
14 font-size: 97%;
15 min-height: 20px;
16 margin: 0px;
17}
18
19/* Module Styles */
20.module {
21 padding: 2px 4px;
22 margin: 1px 1px;
23}
24
25.modules-left>widget:first-child .module {
26 margin-left: 2px;
27}
28
29/* Special Case: Right Margin for Last Module in Right Section */
30.modules-right>widget:last-child .module {
31 margin-right: 2px;
32}
33
34/* Window Styling */
35window#waybar {
36 background-color: transparent;
37 color: black;
38 transition: background-color 0.5s;
39}
40
41/* Make window module transparent when no windows present */
42window#waybar.empty #window {
43 background-color: transparent;
44 background: transparent;
45}
46
47window#waybar.hidden {
48 opacity: 0.2;
49}
50
51/* Tooltip styling */
52menu,
53tooltip {
54 background: rgba(0, 0, 0, 0.9);
55 border-radius: 10px;
56 border: 2px transparent;
57 border-image: linear-gradient(45deg, #FA8BFF, #2BD2FF) 1;
58 padding: 5px;
59 box-shadow: 0 0 0 1px;
60}
61
62menu label,
63tooltip label {
64 color: rgb(0, 238, 255);
65}
66
67/* Workspaces Button Styling */
68#workspaces button {
69 color: rgb(0, 238, 255);
70 background: transparent;
71 font-weight: bolder;
72 box-shadow: inset 0 -3px transparent;
73 transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
74 padding: 2px 5px;
75}
76
77#workspaces button.active {
78 color: black;
79 border-bottom: 2px solid transparent;
80 /* border-top: 2px solid transparent; */
81 border-image: linear-gradient(45deg, #FA8BFF, #2BD2FF) 1;
82 padding: 0 10px;
83}
84
85#workspaces button.focused {
86 background: black;
87}
88
89#workspaces button.visible {
90 color: rgb(0, 238, 255);
91}
92
93#workspaces button.urgent {
94 background: red;
95 color: black;
96 padding: 0 5px;
97}
98
99#workspaces button:hover {
100 background: black;
101 border: 1px solid transparent;
102 border-image: linear-gradient(45deg, #FA8BFF, #2BD2FF) 1;
103 padding: 0 5px;
104}
105
106/* Taskbar Button Styling */
107#taskbar button {
108 padding: 0 1px;
109}
110
111#taskbar button.active {
112 background: black;
113 border-bottom: 2px solid transparent;
114 /* border-top: 2px solid transparent; */
115 border-image: linear-gradient(45deg, #FA8BFF, #2BD2FF) 1;
116 padding: 0 5px;
117}
118#taskbar button:hover {
119 background: black;
120 border: 1px solid transparent;
121 border-image: linear-gradient(45deg, #FA8BFF, #2BD2FF) 1;
122 padding: 0 5px;
123}
124
125/* Transparent Modules When Empty */
126#taskbar.empty,
127window#waybar.empty {
128 background-color: transparent;
129}
130
131/* Specific Module Styles */
132#backlight,
133#backlight-slider,
134#battery,
135#bluetooth,
136#clock,
137#cpu,
138#disk,
139#idle_inhibitor,
140#keyboard-state,
141#memory,
142#mode,
143#network,
144#power-profiles-daemon,
145#pulseaudio,
146#pulseaudio-slider,
147#taskbar,
148#temperature,
149#tray,
150#wireplumber,
151#workspaces,
152#custom-backlight,
153#custom-browser,
154#custom-cava_mviz,
155#custom-cycle_wall,
156#custom-dot_update,
157#custom-file_manager,
158#custom-keybinds,
159#custom-keyboard,
160#custom-light_dark,
161#custom-lock,
162#custom-hint,
163#custom-hypridle,
164#custom-menu,
165#custom-playerctl,
166#custom-power_vertical,
167#custom-power,
168#custom-quit,
169#custom-reboot,
170#custom-settings,
171#custom-spotify,
172#custom-swaync,
173#custom-tty,
174#custom-updater,
175#custom-weather,
176#custom-weather.clearNight,
177#custom-weather.cloudyFoggyDay,
178#custom-weather.cloudyFoggyNight,
179#custom-weather.default,
180#custom-weather.rainyDay,
181#custom-weather.rainyNight,
182#custom-weather.severe,
183#custom-weather.showyIcyDay,
184#custom-weather.snowyIcyNight,
185#custom-weather.sunnyDay {
186 background-color: black;
187 color: rgb(0, 238, 255);
188}
189
190#temperature.critical {
191 background-color: red;
192}
193
194#network.disconnected,
195#pulseaudio.muted {
196 color: red;
197}
198
199#battery.charging,
200#battery.plugged {
201 color: black;
202 background: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #FA8BFF 90%);
203}
204
205@keyframes blink {
206 to {
207 background-color: black;
208 color: red;
209 }
210}
211
212#battery.warning:not(.charging),
213#battery.critical:not(.charging) {
214 background-color: red;
215 color: black;
216}
217
218#battery.warning:not(.charging) {
219 animation: blink 1s linear infinite alternate;
220}
221#battery.critical:not(.charging) {
222 animation: blink 0.5s linear infinite alternate;
223}
224
225/* Focused Label Background */
226label:focus {
227 background-color: black;
228}
229
230/* Keyboard State Styles */
231#keyboard-state>label {
232 padding: 0 5px;
233}
234
235#keyboard-state>label.locked {
236 background: rgba(0, 0, 0, 0.2);
237}
238
239/* Tray Styles */
240#tray {
241 background-color: black;
242}
243
244#tray>.passive {
245 -gtk-icon-effect: dim;
246}
247
248#tray>.needs-attention {
249 -gtk-icon-effect: highlight;
250 padding: 0 5px;
251 background-color: red;
252}
253
254/* Gradient Module Styles */
255#mpd,
256#mpris,
257#window {
258 background: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #FA8BFF 90%);
259}
260
261#backlight-slider slider,
262#pulseaudio-slider slider {
263 min-width: 0px;
264 min-height: 0px;
265 opacity: 0;
266 background-image: none;
267 border: none;
268 box-shadow: none;
269}
270
271#backlight-slider trough,
272#pulseaudio-slider trough {
273 min-width: 80px;
274 min-height: 5px;
275 border-radius: 5px;
276 background-color: #6E6A86;
277}
278
279#backlight-slider highlight,
280#pulseaudio-slider highlight {
281 min-height: 10px;
282 border-radius: 5px;
283 background-color: purple;
284}